import React from 'react';
import { Tabs } from 'antd';
import './index.less';

export default function Preview(props) {
  function getPreviewData(code) {
    const previewData = [
      {
        code: 'sum',
        title: '客户过去6个月收款总额',
        content: () => {
          return (
            <div>
              时间范围：“6月”
              <br />
              计算方式：“求和”
              <br />
              计算字段：“收款金额”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>求和</div>;
        }
      },
      {
        code: 'associated_count',
        title: '客户银行卡过去30天有交易的天数',
        content: () => {
          return (
            <div>
              时间范围：“30天”
              <br />
              计算方式：“关联统计次数”
              <br />
              计算字段：“交易时间”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
              <br />
              执行条件：交易金额 > 0
            </div>
          );
        },
        data: () => {
          return <div>关联统计次数</div>;
        }
      },
      {
        code: 'aver',
        title: '商户过去3个月交易金额笔均值',
        content: () => {
          return (
            <div>
              时间范围：“3月”
              <br />
              计算方式：“求平均”
              <br />
              计算字段：“交易金额”
              <br />
              主属性：“商户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>求平均</div>;
        }
      },
      {
        code: 'count',
        title: '同一银行卡过去90天取款次数',
        content: () => {
          return (
            <div>
              时间范围：“90天”
              <br />
              计算方式：”统计次数“
              <br />
              主属性：“银行卡号”
              <br />
              从属性：空
              <br />
              执行条件：交易类型==取款
            </div>
          );
        },
        data: () => {
          return <div>统计次数</div>;
        }
      },
      {
        code: 'continue_count',
        title: '6个月存在连续3个月使用额度>80%的月份数量',
        content: () => {
          return (
            <div>
              时间范围：“6月”
              <br />
              计算方式：“连续统计次数”
              <br />
              连续时间：3月
              <br />
              计算字段：交易时间
              <br />
              主属性：“银行卡号”
              <br />
              从属性：空
              <br />
              执行条件：使用额度>80%
            </div>
          );
        },
        data: () => {
          return <div>连续统计次数</div>;
        }
      },
      {
        code: 'history_value',
        title: '同一账户30天内近一笔交易的交易类型',
        content: () => {
          return (
            <div>
              时间范围：“30天”
              <br />
              计算方式：“历史数据” 近1次/笔
              <br />
              计算字段：“交易类型”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>历史数据</div>;
        }
      },
      {
        code: 'max',
        title: '客户过去6个月信用卡使用额度的最大值',
        content: () => {
          return (
            <div>
              时间范围：“6月”
              <br />
              计算方式：“求最大”
              <br />
              计算字段：“使用额度”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>求最大</div>;
        }
      },
      {
        code: 'std_deviation',
        title: '客户过去6个月逐笔消费金额的标准差',
        content: () => {
          return (
            <div>
              时间范围：“6月”
              <br />
              计算方式：“标准差”
              <br />
              计算字段：“交易金额”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>标准差</div>;
        }
      },
      {
        code: 'frequency',
        title: '同一用户过去6个月使用次数最多的IP的Top3',
        content: () => {
          return (
            <div>
              时间范围：“6月”
              <br />
              计算方式：“历史频次”
              <br />
              计算字段：“IP”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>历史频次</div>;
        }
      },
      {
        code: 'min',
        title: '客户过去6个月信用卡使用额度的最小值',
        content: () => {
          return (
            <div>
              时间范围：“6月”
              <br />
              计算方式：“求最小”
              <br />
              计算字段：“使用额度”
              <br />
              主属性：“用户ID”
              <br />
              从属性：空
            </div>
          );
        },
        data: () => {
          return <div>求最小</div>;
        }
      }
    ];
    return previewData.find(item => item.code === code);
  }

  const calculatePreviewData = getPreviewData(props.code);
  return (
    <Tabs tabPosition='left'>
      <Tabs.TabPane tab='示例' key='1'>
        {calculatePreviewData && (
          <div className='box'>
            <div className='primary-color-3'>指标名称:</div>
            <div>{calculatePreviewData.title}</div>
            <div className='primary-color-3'>配置方法:</div>
            <div>{calculatePreviewData.content()}</div>
          </div>
        )}
      </Tabs.TabPane>
      <Tabs.TabPane tab='预览' key='2'>
        {props.previewData.data()}
      </Tabs.TabPane>
    </Tabs>
  );
}
